<template>
  <div class="home-container">
    <el-row :gutter="20">
      <!-- 欢迎信息 -->
      <el-col :span="24">
        <el-card class="welcome-card">
          <div class="welcome-content">
            <h1>欢迎来到宠物服务平台</h1>
            <p>为您的宠物提供全方位的服务</p>
          </div>
        </el-card>
      </el-col>

      <!-- 功能区块 -->
      <el-col :span="8">
        <el-card class="feature-card">
          <div slot="header">
            <span>宠物管理</span>
          </div>
          <div class="feature-content">
            <i class="el-icon-pet"></i>
            <p>管理您的宠物信息，记录健康状况</p>
            <div class="button-group">
              <el-button type="primary" @click="$router.push('/main/pets')">宠物列表</el-button>
              <el-button type="success" @click="$router.push('/main/my-pets')">我的宠物</el-button>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="feature-card">
          <div slot="header">
            <span>宠物社区</span>
          </div>
          <div class="feature-content">
            <i class="el-icon-chat-dot-round"></i>
            <p>分享经验，交流心得</p>
            <el-button type="primary" @click="$router.push('/main/forum')">参与讨论</el-button>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="feature-card">
          <div slot="header">
            <span>宠物商城</span>
          </div>
          <div class="feature-content">
            <i class="el-icon-shopping-cart-full"></i>
            <p>购买宠物用品，享受优质服务</p>
            <el-button type="primary" @click="$router.push('/main/shop')">去购物</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style lang="scss" scoped>
.home-container {
  padding: 20px;

  .el-row {
    margin-bottom: 20px;
  }

  .welcome-card {
    margin-bottom: 20px;
    
    .welcome-content {
      text-align: center;
      padding: 40px 0;
      background: linear-gradient(to right, #409EFF, #66b1ff);
      color: white;
      border-radius: 4px;

      h1 {
        font-size: 32px;
        margin-bottom: 10px;
      }

      p {
        font-size: 18px;
        opacity: 0.8;
      }
    }
  }

  .feature-card {
    height: 250px;
    
    .feature-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 180px;

      .button-group {
        display: flex;
        gap: 10px;
        margin-top: 10px;
      }

      i {
        font-size: 48px;
        color: #409EFF;
        margin-bottom: 20px;
      }

      p {
        margin: 15px 0;
        color: #666;
        text-align: center;
      }
    }
  }
}
</style> 